<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    NumericUpDown Demonstration
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <% Ajax.RenderResources<CollapsiblePanelExtender>(); %>
    <% Ajax.RenderResources<NumericUpDownExtender>(); %>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="demoarea">
        <div class="demoheading">
            NumericUpDown Demonstration</div>
        <% using (Ajax.BeginForm("Index", null, new AjaxOptions() { UpdateTargetId = "Response" }, new { id = "form1", name = "form1" }))
           { %>
        <table>
            <tr>
                <td>
                    Enter a numeric value and use the up and down buttons to increment/decrement (min:1
                    and max:7)
                </td>
                <td>
                    <%= Html.TextBox("value1", ViewData["value1"], new { style="width: 120px; text-align: center" }) %>
                </td>
            </tr>
            <tr>
                <td>
                    Choose your favorite month
                </td>
                <td>
                    <%= Html.TextBox("month",  ViewData["month"], new { style="width: 120px; text-align: center" }) %>
                </td>
            </tr>
            <tr>
                <td>
                    Let the web service pick a random number between 0 and 1000 that is higher/lower
                    than the displayed value
                </td>
                <td>
                    <%= Html.TextBox("random",  ViewData["random"], new { style="width: 120px; text-align: center" }) %>
                </td>
            </tr>
            <tr>
                <td>
                    Use the arrow images to increment/decrement the value
                </td>
                <td style="white-space: nowrap">
                    <%= Html.TextBox("value2", ViewData["value2"], new { style = "width: 80px; text-align: center" })%>
                    <img id="img1" width="15" height="15" src="../../Content/Images/down.gif" alt="Down" />
                    <img id="img2" width="15" height="15" src="../../Content/Images/up.gif" alt="Up" />
                </td>
            </tr>
        </table>
        <br />
        <input type="submit" value="Submit" />
        <br />
        <br />
        <% } %>
        <div id="Response">
            <% Html.RenderPartial("Response"); %>
        </div>
    </div>
    <div class="demobottom">
    </div>
    <% Ajax.RegisterScript(new NumericUpDownExtender("value1")
       {
           Width = 120,
           Minimum = 1,
           Maximum = 7,
       }); %>
    <% Ajax.RegisterScript(new NumericUpDownExtender("month")
       {
           Width = 120,
           RefValues = "January;February;March;April;May;June;July;August;September;October;November;December",
       }); %>
    <% Ajax.RegisterScript(new NumericUpDownExtender("random")
       {
           Width = 120,
           ServiceUpPath = "/NumericUpDown",
           ServiceDownPath = "/NumericUpDown",
           ServiceUpMethod = "NextValue",
           ServiceDownMethod = "PrevValue",
       }); %>
    <% Ajax.RegisterScript(new NumericUpDownExtender("value2")
       {
           Width = 80,
           TargetButtonDownID = "img1",
           TargetButtonUpID = "img2",
       }); %>
    <div id="Description_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Description_ToggleImage" src="/Content/Images/collapse.jpg" alt="collapse" />
            NumericUpDown Description
        </div>
    </div>
    <div id="Description_ContentPanel" style="overflow: hidden;">
        <p>
            NumericUpDown is an ASP.NET AJAX extender that can be attached to an input text
            element to add "up" and "down" buttons that increment and decrement the value in
            the input text element. The increment and decrement can be simple +1/-1 arithmetic,
            they can cycle through a provided list of values (like the months of the year),
            or they can call a Web Service to determine the next value. Page authors can also
            provide custom images to be used instead of the default up/down button graphics.
        </p>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Description_ContentPanel")
       {
           ExpandControlID = "Description_HeaderPanel",
           CollapseControlID = "Description_HeaderPanel",
           Collapsed = false,
           ImageControlID = "Description_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",
       }); %>
    <div id="Properties_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Properties_ToggleImage" src="/Content/Images/expand.jpg" alt="expand" />
            NumericUpDown Properties
        </div>
    </div>
    <div id="Properties_ContentPanel" style="overflow: hidden; height: 0px">
        <p>
            The control above is initialized with this code. The <em>italic</em> properties
            are optional:
        </p>
        <pre>Ajax.RegisterScript(new NumericUpDownExtender("month") {
    Width="100",
    <em>RefValues</em>="January;February;March;April",
    <em>TargetButtonDownID</em>="img1",
    <em>TargetButtonUpID</em>="img1",
    <em>ServiceDownPath</em>="/NumericUpDown",
    <em>ServiceDownMethod</em>="PrevValue",
    <em>ServiceUpPath</em>="/NumericUpDown",
    <em>ServiceUpMethod</em>="NextValue",
    <em>Tag</em>="1" } );</pre>
        <ul>
            <li><strong>Constructor parameter</strong> - The ID of the input text element to modify.</li>
            <li><strong>Width</strong> - Combined size of the text input and Up/Down buttons (min value
                25). This property is not used if you provide custom buttons.</li>
            <li><strong>RefValues</strong> - A list of strings separated by semicolons (;) to be
                used as an enumeration by NumericUpDown</li>
            <li><strong>Step</strong> - Step used for simple numeric incrementing and decrementing.
                The default value is 1.</li>
            <li><strong>TargetButtonDownID/TargetButtonUpID</strong> - Reference to custom Up/Down
                button elements.</li>
            <li><strong>ServiceDownPath/ServiceUpPath</strong> - Path to a web service that returns
                the data used to get the next or previous value. This property should be left null
                if ServiceUpMethod or ServiceDownMethod refers to a page method. The web service
                should be decorated with the System.Web.Script.Services.ScriptService attribute.</li>
            <li><strong>ServiceDownMethod/ServiceUpMethod</strong> - Web service method that returns
                the data used to get the next or previous value, or the name of a method declared
                on the Page which is decorated with the WebMethodAttribute. The signature of this
                method must match the following:
                <pre>
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public int NextValue(int current, string tag) { ... }</pre>
                Note you can replace "NextValue" with a name of your choice, but the return type
                and parameter name and type must exactly match, including case.</li>
            <li><strong>Tag</strong> - Specifies a custom parameter to pass to the Web Service</li>
            <li><strong>Minimum</strong> - The minimum value allowed by the extender. Currently,
                it does not prevent out of range values from being entered into the textbox even
                if Minimum or Maximum are specified on the extender, but using the up/down buttons
                should bring the value into the allowed range when clicked.</li>
            <li><strong>Maximum</strong> - The maximum value allowed by the extender.</li>
        </ul>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Properties_ContentPanel")
       {
           ExpandControlID = "Properties_HeaderPanel",
           CollapseControlID = "Properties_HeaderPanel",
           Collapsed = true,
           ImageControlID = "Properties_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",
       }); %>
</asp:Content>
